<script setup>
import tzLoading from '@/components/tz-loading.vue'
import leftBox from './components/left_box.vue'
import centerBox from './components/center_box.vue'
import rightBox from './components/right_box.vue'
import topHeader from './components/header.vue'
import echartsBox from './components/echartsBox.vue'
import Line from './components/line.vue'
import newPage from './components/newPage.vue'




import { init, loading, projectID, gethomeData, p2, p6, leftBottomData, getErrorData, errList, batteryType, lineData, isShowNewList, homeData, leftBottomRHZData, yl } from './common'


init()
const gethomeInterval = ref(null);
const appStore = useAppStore()

console.log('isMobile---------------------', appStore.isMobile)
gethomeInterval.value = setInterval(() => {
  console.log('gethomeData')
  gethomeData()
}, 600000)

const carousel = ref(null)

const tapMoreF = () => {
  if (!appStore.isMobile) {
    carousel.value.next()
  }
}
const tapTop = () => carousel.value.prev()

const currentIndex = ref(0)
const changeCurrent = (urrentIndex, lastIndex) => currentIndex.value = urrentIndex


// leftProps
const dialogVisiblePageLeft = ref(false)
const ruleFormRef = ref()
const dialogform = reactive({
  "addOilTime": "", //加注时间
  "oilLiter": "", //油品容量
  "oilName": "",//油品名称
  "projectid": "", //项目id	
  "oilBrand": '', //油品牌号	
  "updateOilTime": "" //建议换油时间 
})


const ruleFormRef1 = ref()
const dialogform1 = reactive({
  "gl": "",
  "oilLiter": "",
  "oilName": "",
  "projectid": "", //项目id	
  "oilBrand": '',
  "tztime": '',
  "yxtime": "",
  "bid": '',
  yl: ''
})


const closeFnLeft = () => {
  Object.keys(dialogform).forEach(v => {
    dialogform[v] = ''
  })

  Object.keys(dialogform1).forEach(v => {
    dialogform1[v] = ''
  })



}


const rules = reactive({
  addOilTime: [
    { required: true, message: '请输入加注时间', trigger: 'blur' },
  ],
  oilLiter: [
    { required: true, message: '请输入油品容量', trigger: 'blur' },
  ],
  oilName: [
    { required: true, message: '请输入油品名称', trigger: 'blur' },
  ],
  oilBrand: [
    { required: true, message: '请输入油品牌号', trigger: 'blur' },
  ],
  updateOilTime: [
    { required: true, message: '请输入建议换油时间', trigger: 'blur' },
  ],
})

const rules1 = reactive({

  oilName: [
    { required: true, message: '请输入润滑脂名称', trigger: 'blur' },
  ],
  oilLiter: [
    { required: true, message: '请输入润滑脂容量', trigger: 'blur' },
  ],
  oilBrand: [
    { required: true, message: '请输入润滑脂牌号', trigger: 'blur' },
  ],
  gl: [
    { required: true, message: '请输入功率', trigger: 'blur' },
  ],

  yxtime: [
    { required: true, message: '请输入运行时长', trigger: 'blur' },
  ],
  tztime: [
    { required: true, message: '请输入间隔时长', trigger: 'blur' },
  ],
  yl: [
    { required: true, message: '请输入压力', trigger: 'blur' },
  ]
})

const submitFnLeft = () => {
  if (homeData.value.ypxxrhzxx == 1) {

    HomePageControllerupdateb(dialogform1).then(res => {
      leftBottomRHZData.value = [
        { name: '润滑脂名称 :', value: dialogform1.oilName || '', show: true, showLabel: true },
        { name: '润滑脂容量 :', value: dialogform1.oilLiter || '', show: true, showLabel: true },
        { name: '润滑脂牌号 :', value: dialogform1.oilBrand || '', show: true, showLabel: true },
        { name: '运行时长 : ', value: dialogform1.yxtime || '', show: true, showLabel: true },
        { name: '间隔时长 :', value: dialogform1.tztime || '', show: true, showLabel: true },
        { name: '功率 :', value: dialogform1.gl || '', show: true, showLabel: true },
        yl.value = dialogform1.yl
      ]
      dialogVisiblePageLeft.value = false
    })

  } else {
    HomePageControllerUpdatejzsj(dialogform).then(res => {
      leftBottomData.value = [
        { name: '油品名称 :', value: dialogform.oilName || '', type: 2 },
        { name: '油品容量 :', value: dialogform.oilLiter || '', type: 2 },
        { name: '油品牌号 :', value: dialogform.oilBrand || '', type: 2 },
        { name: '加注时间 : ', value: dialogform.addOilTime || '', type: 0 },
        { name: '建议换油时间 :', value: dialogform.updateOilTime || '', type: 1 },
      ]
      dialogVisiblePageLeft.value = false
    })
  }

}

const openElMessageBoxFn = () => {
  if (homeData.value.ypxxrhzxx == 1) {
    dialogform1.oilLiter = p6.value.oilLiter
    dialogform1.oilName = p6.value.oilName
    dialogform1.oilBrand = p6.value.oilBrand
    dialogform1.gl = p6.value.gl
    dialogform1.yxtime = p6.value.yxtime
    dialogform1.bid = p6.value.bid
    dialogform1.tztime = p6.value.tztime
    dialogform1.projectid = projectID.value
    dialogform1.yl = p6.value.yl
  } else {
    dialogform.addOilTime = p2.value.addOilTime
    dialogform.oilLiter = p2.value.oilLiter
    dialogform.oilName = p2.value.oilName
    dialogform.oilBrand = p2.value.oilBrand
    dialogform.updateOilTime = p2.value.updateOilTime
    dialogform.projectid = projectID.value
  }

  dialogVisiblePageLeft.value = true
}


const dialogVisiblePage = ref(false)
const DialogLoading = ref(true)
const openDialog = () => {
  dialogVisiblePage.value = true
  DialogLoading.value = true
  HomePageControllerGetallyz(projectID.value).then(res => {
    DialogLoading.value = false
    console.log(res, 'result')
    dialogForm.list = res.result.map(v => {
      return {
        "projectid": v.projectid,
        "yz": v.numyz,
        "yztype": v.yztype,
        'webid': v.webid,
      }
    })
  })
}


const dialogForm = reactive({
  list: []
})

function addListFn() {
  dialogForm.list.push({
    "projectid": projectID.value,
    "yz": 0,
    "yztype": '',
    'webid': new Date().getTime(),
  })
}

function submitFn() {
  console.log(dialogForm.list)
  if (dialogForm.list.length == 0) {
    HomePageControllerDelallyz(projectID.value)
    return dialogVisiblePage.value = false
  }
  HomePageControllerUpdateyz(dialogForm.list).then(res => {
    toast('修改成功')
    gethomeData()
  })
}

function delListFn(e) {
  dialogForm.list = dialogForm.list.filter(v => v.webid != e)
}

const closeFn = () => dialogForm.list.length = 0

const PageOptions1 = ref([])

const getPageOptions1 = () => {
  HomePageControllerGetyztype().then(res => {
    PageOptions1.value = res.result
  })
}
getPageOptions1()







const getErrorInterval = ref(null);

getErrorInterval.value = setInterval(() => {
  console.log('getErrorData')

  getErrorData()
}, 300000);


onBeforeUnmount(() => {
  if (gethomeInterval.value) {
    clearInterval(gethomeInterval.value);
    gethomeInterval.value = null;
  }

  if (getErrorInterval.value) {
    clearInterval(getErrorInterval.value);
    getErrorInterval.value = null;
  }
});




const dialogVisiblePageEchar = ref(false)
const DialogLoadingEchar = ref(true)
const openEchartFn = () => {
  dialogVisiblePageEchar.value = true
  DialogLoadingEchar.value = true
  HomePageControllerGetallzxt(projectID.value).then(res => {
    DialogLoadingEchar.value = false
    console.log(res, 'result')
    dialogFormEchar.list = res.result.map(v => {
      return {
        "projectid": v.projectid,
        "px": v.px,
        "yztype": v.yztype,
        'id': v.id,
      }
    })
  })
}


const dialogFormEchar = reactive({
  list: []
})

function addListFnEchar() {
  dialogFormEchar.list.push({
    "projectid": projectID.value,
    "px": 0,
    "yztype": '',
    'id': new Date().getTime(),
  })
}

function submitFnEchar() {
  console.log(dialogFormEchar.list)
  if (dialogFormEchar.list.length == 0) {
    HomePageControllerDelallzxt(projectID.value)
    return dialogVisiblePageEchar.value = false
  }
  HomePageControllerUpdatezxt(dialogFormEchar.list).then(res => {
    toast('修改成功')
    gethomeData()
  })
}

function delListFnEchar(e) {
  dialogFormEchar.list = dialogFormEchar.list.filter(v => v.id != e)
}

const closeFnEchar = () => dialogFormEchar.list.length = 0





const dialogVisiblePageEcharItem = ref(false)
const echartsItemValue = ref(null)
const echartsIsShow = ref(false)

const dblclickEchartsFn = (index) => {
  console.log(index)
  echartsIsShow.value = false
  echartsItemValue.value = index
  dialogVisiblePageEcharItem.value = true
  setTimeout(() => {
    echartsIsShow.value = true
  }, 500)
}


const userStore = useUserStore()


</script>

<template>
  <!-- style="--el-component-size: 26px" -->
  <div class="w-full h-full">
    <tzLoading v-if="loading"></tzLoading>



    <div class="w-full h-full  relative overflow-auto" v-else>
      <topHeader @tapTopFn="tapTop" :currentIndex="currentIndex"></topHeader>
      <newPage v-if="isShowNewList && userStore.userInfo.syzt == 1"></newPage>
      <template v-else>

        <!-- <div v-if="batteryType != 0" -->
        <div class="absolute z-50 top-[10%] left-[10%] right-[10%] bottom-[86%]  overflow-hidden ">
          <el-carousel height="30px" direction="vertical">
            <el-carousel-item v-for="(item, index) in errList" :key="item.id">
              <div class="flex justify-center ">
                <span class="text-[30px] text-red-600 " style="font-weight: 500;">{{ item.projectName }}</span>
                <span class="text-[30px] mx-[20px] text-red-600 " style="font-weight: 500;">{{ item.createTime }}
                </span>
                <span class="text-[30px] text-red-600 " style="font-weight: 500;">{{ item.reason }}</span>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="xwxs:(flex h-full flex-col px-[80px]) xwsm:(hidden)  overflow-auto pb-[600px]">
          <leftBox @openElMessageBoxFn="openElMessageBoxFn"></leftBox>
          <centerBox></centerBox>
          <rightBox @dblclickEcharts="dblclickEchartsFn" @tapMoreFn="tapMoreF" @openDialogFn="openDialog"
            @openEchartFn="openEchartFn"></rightBox>
          <echartsBox @dblclickEcharts="dblclickEchartsFn"></echartsBox>
        </div>


        <n-carousel class="xwxs:(hidden ) xwsm:(flex)" :on-update:current-index="changeCurrent" ref="carousel"
          direction="vertical" :show-dots="false" dot-placement="right" style="width: 100%; height: 100%">
          <div
            class="w-full h-full   wxwxs:() xwsm:(flex-nowrap flex  justify-center) xwmd:(gap-[18px] flex  justify-center) xwlg:(gap-[38px] flex  justify-center)">
            <leftBox @openElMessageBoxFn="openElMessageBoxFn"></leftBox>
            <centerBox></centerBox>
            <rightBox @dblclickEcharts="dblclickEchartsFn" @tapMoreFn="tapMoreF" @openDialogFn="openDialog"
              @openEchartFn="openEchartFn"></rightBox>
          </div>
          <div class="w-full h-full">
            <echartsBox @dblclickEcharts="dblclickEchartsFn"></echartsBox>
          </div>
        </n-carousel>

      </template>


      <el-dialog @close="closeFn" v-model="dialogVisiblePage" title="传感器阈值设定"
        :width="appStore.isMobile ? '90%' : '500px'" top="20vh" destroy-on-close>
        <div class="flex flex-col gap-[30px]" v-loading="DialogLoading">

          <template v-for="(item, index) in dialogForm.list" :key="item.webid">
            <div class="flex gap-[30px]">
              <el-select class="" v-model="item.yztype" placeholder="请选择阈值类型">
                <el-option v-for="item in PageOptions1" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>

              <el-input v-model="item.yz" type="number" placeholder="阈值" size="small"></el-input>

              <el-button size="small" type="primary" class="w-[100px]" @click="delListFn(item.webid)">
                <span class="text-white">删除</span>
              </el-button>

            </div>
          </template>
          <el-button size="small" type="primary" class="w-[100px]" @click="addListFn">
            <span class="text-white">添加</span>
          </el-button>


        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisiblePage = false">取消</el-button>
            <el-button type="primary" @click="submitFn">
              <span class="text-white">确定</span>
            </el-button>
          </div>
        </template>
      </el-dialog>



      <el-dialog @close="closeFnLeft" v-model="dialogVisiblePageLeft"
        :title="homeData.ypxxrhzxx == 1 ? '修改润滑脂信息' : '修改油品信息'" :width="appStore.isMobile ? '90%' : '500px'" top="20vh"
        destroy-on-close>
        <div class="flex flex-col gap-[30px]">

          <template v-if="homeData.ypxxrhzxx == 1">

            <el-form ref="ruleFormRef1" :model="dialogform1" :rules="rules1" label-width="auto" style="width: 100%;"
              class="demo-ruleForm flex-1" status-icon>
              <el-form-item label="润滑脂名称" prop="oilName">
                <el-input style="width: 100%;" v-model="dialogform1.oilName" />
              </el-form-item>

              <el-form-item label="润滑脂牌号" prop="oilBrand">
                <el-input v-model="dialogform1.oilBrand" />
              </el-form-item>
              <el-form-item label="润滑脂容量" prop="oilLiter">
                <el-input v-model="dialogform1.oilLiter" />
              </el-form-item>

              <el-form-item label="运行时长" prop="yxtime">
                <el-input v-model="dialogform1.yxtime" />
              </el-form-item>
              <el-form-item label="间隔时长" prop="tztime">
                <el-input v-model="dialogform1.tztime" />
              </el-form-item>
              <el-form-item label="功率" prop="gl">
                <el-input v-model="dialogform1.gl" />
              </el-form-item>

              <el-form-item label="压力" prop="yl">
                <el-input v-model="dialogform1.yl" />
              </el-form-item>

            </el-form>

          </template>
          <template v-else>
            <el-form ref="ruleFormRef" :model="dialogform" :rules="rules" label-width="auto" style="width: 100%;"
              class="demo-ruleForm flex-1" status-icon>
              <el-form-item label="油品名称" prop="oilName">
                <el-input style="width: 100%;" v-model="dialogform.oilName" />
              </el-form-item>

              <el-form-item label="油品牌号" prop="oilBrand">
                <el-input v-model="dialogform.oilBrand" />
              </el-form-item>
              <el-form-item label="油品容量" prop="oilLiter">
                <el-input v-model="dialogform.oilLiter" />
              </el-form-item>

              <el-form-item label="加注时间" prop="addOilTime">
                <el-input v-model="dialogform.addOilTime" />
              </el-form-item>
              <el-form-item label="建议换油时间" prop="updateOilTime">
                <el-input v-model="dialogform.updateOilTime" />
              </el-form-item>




            </el-form>

          </template>



        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisiblePageLeft = false">取消</el-button>
            <el-button type="primary" @click="submitFnLeft">
              <span class="text-white">确定</span>
            </el-button>
          </div>
        </template>
      </el-dialog>





      <el-dialog @close="closeFnEchar" v-model="dialogVisiblePageEchar" title="折线图设定"
        :width="appStore.isMobile ? '90%' : '500px'" top="20vh" destroy-on-close>
        <div class="flex flex-col gap-[30px]" v-loading="DialogLoadingEchar">

          <template v-for="(item, index) in dialogFormEchar.list" :key="item.id">
            <div class="flex gap-[30px]">
              <el-select class="" size="small" v-model="item.yztype" placeholder="请选择折线图">
                <el-option v-for="item in PageOptions1" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>

              <el-input v-model="item.px" type="number" placeholder="排序" size="small"></el-input>

              <el-button size="small" type="primary" class="w-[100px]" @click="delListFnEchar(item.id)">
                <span class="text-white">删除</span>
              </el-button>

            </div>
          </template>
          <el-button v-if="dialogFormEchar.list.length < 3" size="small" type="primary" class="w-[100px]"
            @click="addListFnEchar">
            <span class="text-white">添加</span>
          </el-button>


        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisiblePageEchar = false">取消</el-button>
            <el-button type="primary" @click="submitFnEchar">
              <span class="text-white">确定</span>
            </el-button>
          </div>
        </template>
      </el-dialog>




      <el-dialog v-model="dialogVisiblePageEcharItem" title="" destroy-on-close fullscreen :show-close="false">

        <template #header="{ close, titleId, titleClass }">
          <div class="my-header w-full flex justify-end">

            <el-button class="ml-auto" type="danger" @click="close">
              <el-icon class="el-icon--left">
                <CircleCloseFilled />
              </el-icon>
              关闭
            </el-button>
          </div>
        </template>
        <div class="flex w-screen h-screen ">






          <template v-for="(item, index) in lineData" :key="index">
            <div class="w-[80%] h-[80%] mx-auto" v-if="index == echartsItemValue && echartsIsShow">
              <Line :yData='item.ydata' :xData='item.xdata' :markline="item.markline">
              </Line>
            </div>
          </template>




        </div>
        <!-- <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisiblePageEchar = false">取消</el-button>
              <el-button type="primary" @click="submitFnEchar">
                <span class="text-white">确定</span>
              </el-button>
            </div>
          </template> -->
      </el-dialog>



    </div>





  </div>
</template>

<style scoped></style>
